<html>    
  <head> 
    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>        
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../gmap3.js"></script> 
    <style>
      body{
        text-align:center;
      }
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 500px;
        height: 500px;
      }
      .cluster{
  			color: #FFFFFF;
  			text-align:center;
  			font-family: 'Arial, Helvetica';
  			font-size:11px;
  			font-weight:bold;
      }
      .cluster-1{
        background-image:url(images/m1.png);
        line-height:53px;
  			width: 53px;
  			height: 52px;
      }
      .cluster-2{
        background-image:url(images/m2.png);
        line-height:53px;
  			width: 56px;
  			height: 55px;
      }
      .cluster-3{
        background-image:url(images/m3.png);
        line-height:66px;
  			width: 66px;
  			height: 65px;
      }
    </style>
    
    <script type="text/javascript">
        
      $(function(){
        $('#test1')
          .gmap3(
          { action:'init',
            options:{
              center:[46.578498,2.457275],
              zoom: 5
            }
          },
          { action: 'addMarkers',
            radius:60,
            markers: [
              [48.82567253451685,2.3693843749999814], //#1
              [48.82567253451685,2.2693843749999814], //#1
              [48.82567253451685,2.1693843749999814], //#1
              [48.82567253451685,2.0693843749999814], //#1
              [45.82567253451685,2.3693843749999814], //#2
              [45.82567253451685,2.2693843749999814], //#2
              [45.82567253451685,2.1693843749999814], //#2
              [45.82567253451685,2.0693843749999814], //#2
              [48.82567253451685,1.918], // #1 after average
              [47.3,1.918] // no group
            ],
            clusters:{
          		// This style will be used for clusters with more than 0 markers
          		0: {
          		  content: '<div class="cluster cluster-1">CLUSTER_COUNT</div>',
          			width: 53,
          			height: 52
          		},
          		// This style will be used for clusters with more than 10 markers
          		2: {
          		  content: '<div class="cluster cluster-2">CLUSTER_COUNT</div>',
          			width: 56,
          			height: 55
          		},
          		// This style will be used for clusters with more than 20 markers
          		4: {
          		  content: '<div class="cluster cluster-3">CLUSTER_COUNT</div>',
          			width: 66,
          			height: 65
          		}
          	}
          },
          { action: 'addMarkers',
            markers:[
              [48.8620722, 2.352047],
              [46.59433,0.342236],
              [42.704931, 2.894697]
            ]
          },
          {action: 'addCircle',
            center: [47.34329,5.028076],
            radius : 250000,
            fillColor : "#F4AFFF",
            strokeColor : "#CB53DF"
          },
          {action: 'addCircle',
            center: [47.34329,5.028076],
            radius : 125000,
            fillColor : "#008BB2",
            strokeColor : "#005BB7"
          },
          {action: 'addRectangle',
            bounds: {ne:[47.238965,-1.607666], sw:[48.404409,-4.508057]},
            radius : 750,
            fillColor : "#008BB2",
            strokeColor : "#005BB7"
          },
          {action: 'addPolyline',
            options:{
              strokeColor: "#FF0000",
              strokeOpacity: 1.0,
              strokeWeight: 2
            },
            path:[
              [53.08478686807706, -0.443115624999999],
              [53.242865580591584, 0.479735937500001],
              [51.853424606562065, 0.567626562500001],
              [52.015993653812835, -0.706787499999999],
              [52.66039236803361, -0.179443749999999]
            ] 
          },
          {action: 'addPolyline',
            options:{
              strokeColor: "#FF0000",
              strokeOpacity: 1.0,
              strokeWeight: 2
            },
            path:[
              [52.63372973171113, 1.798095312500001],
              [52.63372973171113, 3.468017187500001]
            ] 
          },
          {action: 'addPolyline',
            options:{
              strokeColor: "#FF0000",
              strokeOpacity: 1.0,
              strokeWeight: 2
            },
            path:[
              [53.37415340143462, 4.215087500000001],
              [53.37415340143462, 5.753173437500001],
              [53.031964521054995, 6.104735937500001],
              [52.76688041593213, 5.841064062500001],
              [52.79346182438923, 4.786376562500001],
              [52.71366888314625, 5.885009375000001],
              [52.31250879780346, 6.368407812500001],
              [51.8805603577419, 6.280517187500001],
              [51.93478275669203, 4.390868750000001],
              [53.37415340143462, 4.215087500000001]
            ] 
          },
          {action: 'addPolygon',
            options:{
              strokeColor: "#FF0000",
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "#FF0000",
              fillOpacity: 0.35
            },
            paths:[	 
              [47.23896534797107, 10.103759375000001],
              [45.78744522454207, 10.894775000000001],
              [45.20216719900454, 13.004150000000001],
              [44.798208663960814, 10.894775000000001],
              [42.76798523689034, 10.103759375000001],
              [44.798208663960814, 9.400634375000001],
              [45.264061876535, 7.291259375000001],
              [45.78744522454207, 9.400634375000001]
            ] 
          }
        );
      });
      
      function clearThat(){
        var tg = $('#target').val(),
            wh = $('#which').val(),
            todo = {action:'clear'};
        if (tg != 'all'){
          todo['list'] = tg; /* can be an array of name : ['marker', 'polyline', ...] */
        }
        if (wh == 'first'){
          todo['first'] = true;
        }
        if (wh == 'last'){
          todo['last'] = true;
        }
        $('#test1').gmap3(todo);
      }
    </script>
    
  <body>
    <select id="target">
      <option>all</option>
      <option>cluster</option>
      <option>marker</option>
      <option>circle</option>
      <option>rectangle</option>
      <option>polyline</option>
      <option>polygon</option>
    </select>
    <select id="which">
      <option>all</option>
      <option>last</option>
      <option>first</option>
    </select>
    <input type="button" value="clear" onclick="clearThat();">
    <div id="test1" class="gmap3"></div>
  </body>
</html>